<template>
  <div ref="tsRoot">
    <!-- <el-scrollbar ref="scrollbar" class="scrollbar"> -->
    <headers ref="headersRef" />
    <div class="main">
      <nuxt ref="tsNuxt" :scrollTop="scrollTop" />
    </div>
    <footers ref="footerRef" />
    <!-- </el-scrollbar> -->
  </div>
</template>
<script>
import headers from './header.vue'
import footers from './footer.vue'
export default {
  components: {
    headers,
    footers
  },
  data() {
    return {
      scrollTop: 0,
      timer:null
    }
  },
  mounted() {
    // this.handleScroll()
    window.addEventListener('scroll', function () {
      window.document.body.toggleAttribute('scroll', true)
      this.timer && this.clearTimeout(this.timer)
      this.timer = setTimeout(() => { document.body.toggleAttribute('scroll') }, 500) }
    )
  },
  methods: {
    handleScroll() {
      let scrollbarEl = this.$refs.scrollbar.wrap
      scrollbarEl.onscroll = () => {
        this.scrollTop = scrollbarEl.scrollTop
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.main {
  width: 100%;
  overflow: hidden;
}

.scrollbar {
  height: 100vh;
}

.is-horizontal {
  display: none;
}
</style>
